<!-- 样品反馈详情组件 -->
<template>
      <div style="width: 100%;overflow: hidden;">
        <van-popup
          v-model="show"
          position="right"
          :style="{ height: '100%', width: '100%' }"
        >
          <div style="position: fixed;top: 0;left: 0;width: 100%;z-index: 999;">
            <van-nav-bar
            title="样品反馈详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft" />
              <!-- <div class="page-bottom">
                  <van-button
                    @click="handleBack"
                    style="margin-left: 8px"
                    slot="button"
                    type="default"
                    >返回</van-button
                  >
                </div> -->


                <div>

                </div>
            </div>
        </van-popup>
      </div>
</template>
    
    <script>
    import {
      Col,
      Cell,
      CellGroup,
      Popup,
      NavBar,
      Toast,
      Field
    } from "vant";
    
    export default {
      components: {
        "van-nav-bar": NavBar,
        "van-popup": Popup, //弹层
        "van-field": Field,
        "van-col": Col,
        "van-cell": Cell,
        "van-cell-group": CellGroup
      },
      data() {
        return {
          
          // 是否显示弹窗
          show:false,
          // 添加收件人绑定数据
          fieldListParams:{
            // 收件人
            Addressee:"",
            // 联系电话
            TelNumber:"",
            // 收件地址
            Address:"",
            // 是否是默认地址
            IsDefault:1,
            // 备注
            Remark:"",
            // 客户id
            CustomerId: "",
          }
      
        };
      },
      created(){
            // 获取反馈详情数据
            this.getTheDataOfAllDetail()
      },
      methods: {
        //返回
        onClickLeft() {
          this.show = false;
        },
        close() {
          this.show = false;
        },
        clear() {
          this.queryParam = [];
          this.getDataList();
        },

      //   获取样品反馈详情
        getTheDataOfAllDetail() {
          this.http
            .post("/SampleManagement/SPL_SampleApplyMain/GetTheDataOfAll", {
              SortField: "Id",
              SortType: "asc",
              Search: this.queryParam,
              ...this.filters
            })
            .then(resJson => {
              this.data = resJson.Data;
    
              console.log(this.List);
            });
        },
      //   打开弹窗
        init() {
          this.show = true;
        },
        //   打开弹窗
        openForm() {
          this.init();
      //     this.getDataList();
        }


      }
    };
    </script>
    
<style scoped>
    /* 覆盖van-button的默认样式 */
.van-button{
  height: 35px !important;
  border-radius: 5px;
}
  /* 适配底部导航栏 */
.page-bottom{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 65px; /*暂时发现安卓小屏手机安全区为0 && 不带单位的话padding-bottom会失效，写一个兜底, 并写在最上面；f12发现css样式如果都给height设置样式，会依次往下，用最底下的一个样式，如果最下面的没失效，依次往上查找，所以兜底的写在最上面 */
  height: calc(58px + constant(safe-area-inset-bottom)); /* 直接扩展高度，因为padding-bottom是内边距 */
  height: calc(58px + env(safe-area-inset-bottom)); /* 直接扩展高度 */
  background: #fff;
  padding: 10px 11px 0 20px;
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 iOS<11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2*/
  text-align: right;
  border-top: 1px solid #e9e9e9;
}
    
    .ckbxcli {
      border: 1px solid Gainsboro;
      /* width: 250px; */
      height: 150px;
      text-align: center;
      margin-left: 15px;
      margin-top: 15px;
      padding-right: 0px;
      padding-left: 0px;
      padding-bottom: 2px;
      cursor: pointer;
      padding-top: 6px;
      list-style-type: none;
      display: inline-block;
    }
    ul {
      margin-top: 20px;
    }
    .nav {
      position: fixed !important;
      width: 100%;
    }
    </style>
    